<template>
	<view class="">
		
		<view class="yhpj" >
			<view class="yhpj-all">
				<view class="yhpj-all-fs">用户评论
					<text class="yhpj-all-sl" v-if="pjinfo.length>0">{{totalNumber}}</text>
				</view>
				<view class="ckgd" @click="nato" v-if="pjinfo.length>3">
					查看更多
					<image :src="getImg('bh-faxian-gl-jiantou1.png')" mode="aspectFill"></image>
				</view>
			</view>
			<view class="konglist" v-if="pjinfo.length==0">空空如也，这暂时什么都没有哦～</view>
			<view class="allpl" v-if="pjinfo.length>0">
				<view class="zpf">
					{{alldata.allAvg}}
					<text>/5分　|　</text>
				</view>
				<view class="pfx">
					<view class="pfxlist" v-for="(items,indexs) in alldata.allScoreList">
						{{items.name}}
						<text>{{items.score}}</text>
					</view>
				</view>
			</view>
			<view class="yhpl" v-if="pjinfo.length>0" v-for="(el,ind) in pjinfo">
				<view class="yhxx">
					<image class="yhxx-img" :src="el.img"></image>
					<view class="yhxx-name">
						{{el.name}}
						<view class="scitemstarts">
							<image class="star-image" :src="el.avg>0? selectedSrc:normalSrc"></image>
							<image class="star-image" :src="el.avg>1? selectedSrc:normalSrc"></image>
							<image class="star-image" :src="el.avg>2? selectedSrc:normalSrc"></image>
							<image class="star-image" :src="el.avg>3? selectedSrc:normalSrc"></image>
							<image class="star-image" :src="el.avg>4? selectedSrc:normalSrc"></image>
						</view>
					</view>
				</view>
				<view class="yhplxx">
					{{el.des}}
				</view>
				<view class="imglist" v-if="el.imgList.length>0">
					<block v-for="(item,index) in el.imgList" v-if="el.imgList.length>3">
						<image @click="yulan(el.imgList)" :class="[index==0?'leftimg':index==2?'rightimg':'']" mode="aspectFill" :src="getImg1(item.url)"></image>
					</block>
					<block v-for="(item,index) in el.imgList" v-if="el.imgList.length==2">
						<image @click="yulan(el.imgList)" :class="[index==0?'leftimg':index==1?'rightimg':'']" mode="aspectFill" :src="getImg1(item.url)"></image>
					</block>
					<block v-for="(item,index) in el.imgList" v-if="el.imgList.length==1">
						<image @click="yulan(el.imgList)" mode="aspectFill" :src="getImg1(item.url)"></image>
					</block>
				</view>
				<view class="plsj">
					<image :src="getImg('bh-tc-icon-shijian.png')"></image>
					{{el.createTime}}
				</view>
			</view>
			<!-- <view class="ckpj" v-if="totalNumber>3" @click="gotopj">
			<text class="ckpj-txt">查看全部评价</text>
		</view> -->
		</view>
	</view>
</template>

<script>
	var web = require('../../components/utils/request.js');
	export default {
		props: ['info'],
		data() {
			return {
				pjinfo: [],
				totalNumber: 0,
				normalSrc: '../../static/star-null-big_hong1.png',
				selectedSrc: '../../static/star-on-big_hong1.png',
				alldata: [],
			}
		},
		watch: {
			info() {
				this.getPinlun();
			}
		},
		created() {

		},
		methods: {
			yulan(imgList){
				console.log(imgList)
				var tmp=[]
				for(var i=0;i<imgList.length;i++){
					tmp.push('https://hshd.tour-ma.com'+imgList[i].url)
				}
				// 预览图片
				uni.previewImage({
					urls: tmp,
					longPressActions: {
						// itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			nato() {
				var url = '/pages/wode/pingjia?waresId=' + this.info.waresId + '&orderType=' + this.info.orderType;
				uni.navigateTo({
					url: url
				})
			},
			getImg1(url) {
				return 'https://hshd.tour-ma.com' + url
			},
			getImg(url) {
				return 'https://hshd.tour-ma.com/r/cms/www/weifang/ximg/' + url
			},
			getPinlun() {
				var url = '/order/appraiseList.jspx';
				var para = {
					uuid: this.info.waresId,
					pageNo: 1,
					pageSize: 3,
					orderType: this.info.orderType
				}
				var that = this;
				web.httpPost(that, url, para, function(res) {
					var tmp = [];
					if (res.data.status == 200) {
						tmp = res.data.data;
					}
					that.totalNumber = res.data.totalNumber;
					that.pjinfo = tmp;
					that.alldata = res.data;
				})
			},
			gotopj() {
				uni.navigateTo({
					url: '/pages/goupiao/pjlist?waresId=' + this.info.waresId + '&orderType=' + this.info.orderType
				})
			}
		}
	}
</script>

<style lang="scss">
	.allpl {
		width: 700rpx;
		display: flex;
		align-items: baseline;
		margin: 40rpx 0 30rpx;
		line-height: 42rpx;

		.pfx {
			display: flex;
			align-items: center;
			margin-left: 35rpx;

			.pfxlist {
				font-size: 29rpx;
				color: #999999;

				text {
					margin-left: 10rpx;
				}

				margin-right: 20rpx;
			}
		}

		.zpf {
			font-size: 56rpx;
			font-weight: 550;
			color: #FF540B;

			text {
				font-weight: 500;
				font-size: 29rpx;
				color: #666666;
				margin-left: 10rpx;
			}
		}
	}

	.plsj {
		font-size: 25rpx;
		color: #AAAAAA;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;

		image {
			width: 22rpx;
			height: 22rpx;
			margin-right: 10rpx;
		}
	}

	.imglist {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx 0 15rpx;

		.leftimg {
			border-radius: 17rpx 0 0 17rpx;
		}

		.rightimg {
			border-radius: 0 17rpx 17rpx 0;
		}

		image {
			width: 231rpx;
			height: 215rpx;
			margin-right: 4rpx;
		}
	}

	.scitemstarts {
		display: flex;
		align-items: center;
		margin-left: 20rpx;

		.star-image {
			width: 28rpx;
			height: 26rpx;
			margin-right: 7rpx;
		}
	}

	.yhpj-all-img {
		width: 9upx;
		height: 15upx;
		margin-left: 10upx;
		margin-top: 5upx;
	}

	.ckpj-txt {
		font-size: 24upx;
		color: rgba(93, 163, 67, 1);
	}

	.ckpj {
		margin-top: 48upx;
		width: 196upx;
		height: 51upx;
		margin-left: 221upx;
		border: 1upx solid rgba(93, 163, 67, 1);
		border-radius: 6upx;
		line-height: 40upx;
		text-align: center;
	}



	.yhplxx {
		margin-top: 25rpx;
		line-height: 45rpx;
		font-size: 29rpx;
		color: #505050;
		max-height: 135rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.yhxx-time {
		position: absolute;
		top: 5upx;
		right: 0;
		font-size: 24upx;
		color: rgba(153, 153, 153, 1);
	}

	.yhxx-name-pftxt {
		display: block;
		font-size: 28upx;
		color: rgba(93, 163, 67, 1);
		margin-top: 6upx;
	}

	.yhxx-name-txt {
		font-size: 30upx;
		color: rgba(153, 153, 153, 1);
	}

	.yhxx-name {
		margin-left: 25upx;
		font-size: 29rpx;
		color: #333;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.yhxx-img {
		width: 63upx;
		height: 63upx;
		border-radius: 50%;
	}

	.yhxx {
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
	}

	.yhpl {
		width: 700upx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 46rpx;
	}

	.yhpj-all-sl {
		font-size: 25upx;
		color: #999;
		margin-left: 15rpx;
	}

	.yhpj-all-pj {
		font-size: 32upx;
		color: #5DA343;
		margin-right: 350upx;
	}

	.yhpj-all-fs {
		color: #333333;
		font-size: 43upx;
		font-weight: 600;
	}

	.yhpj-all {
		width: 700upx;
		font-size: 28upx;
		color: #222;
		display: flex;
		align-items: baseline;
		margin-top: 30rpx;
		justify-content: space-between;

		.ckgd {
			font-size: 28rpx;
			color: #5A8BFC;
			display: flex;
			align-items: center;

			image {
				width: 13rpx;
				height: 21rpx;
				margin-left: 10rpx;
			}
		}
	}

	.yhpj {
		width: 750upx;
		margin-top: 20upx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;
	}
</style>
